<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LikingFit烟台鲁大店-地图管理</title>
    <link rel="Shortcut Icon" href="/images/liking.png"/>
    <link rel="stylesheet" href="/m/bootstrap/bootstrap.css">
    <script src="/common/jquery-3.1.1.min.js"></script>
    <script src="/m/bootstrap/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/m/css/common.css">
    <link rel="stylesheet" href="/m/css/layout.css">
    <script src="/m/js/common.js"></script>
    <script src="/m/js/layout.js"></script>
    <style>
        input[type=text]{
            display: inline-block;
            padding-left: 5px;
        }
        .container{
            padding-left: 50px;
        }
        .top{
            position: fixed;
            background-color: white;
            padding-bottom: 15px;
            border-bottom: #34c86c solid 2px;
            width: 480px;
            padding-top: 15px;
        }
        .action a{
            display: inline-block;
            margin-left: 20px;
        }
        .content{
            margin-top: 80px;
            width: 800px;
        }
        .add-bg>div{
            margin-bottom: 15px;
        }
        .add-bg>div input[type=text]{
            width: 240px;
            height: 30px;
            outline: none;
            border: solid 1px gainsboro;
            /*border-color: gainsboro;*/
            /*border-width: 1px;*/
        }
        .submit-bg{
            width: 200px;
            background-color: #34c86c;
            padding: 3px 0;
            margin-top: 60px;
            border-radius: 5px;
        }
        .add-bg a{
            display: inline-block;
            width: 100%;
            text-align: center;
            color: white;
            text-decoration: none;
        }
        /*列表*/
        .place-bg{
            width: 600px;
            /*height: 600px;*/
            padding-left: 0px;
        }
        .place-bg ul{
            list-style: none;
            margin-left: 0px;
        }
        .place-bg ul li{
            border-bottom: #edeff3 solid 1px ;
        }
        .place-bg a.type{
            line-height: 34px;
        }
        .place-bg ul:last-child li {
            padding: 10px 0;
        }
        .place-bg ul:last-child p{
            margin-bottom: 0;
        }
        .place-bg ul:last-child div:first-child{
            width: 300px;
        }
        .place-bg ul:last-child div:last-child{
            width: 100px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            getPlaces()
            $('.place-bg').css('display','none')
        })
        //添加
        function insertAddress() {
            var name = $('.name').val()
            if (name == null || name == '') {
                showModel("请输入名称")
                return
            }
            var lng = $('.lng').val()
            if (lng == null || lng == '') {
                showModel('请输入经度')
                return
            }
            var lat = $('.lat').val()
            if (lat == null || lat == '') {
                showModel('请填入纬度')
                return
            }
            var typeName = $('select option:selected').text()
            var typeId = $('select option:selected').val()
            var showInMap = $('.show-bg input[type=radio]').eq(0).prop('checked')

            var param = {
                name      : name,
                lng       : lng,
                lat       : lat,
                type_name : typeName,
                type_id   : typeId,
                is_show   : showInMap
            }

            request('http://afantizz.com/likingfit/add-place',param,function (resp) {
                showModel('添加成功',function () {
                    location.reload()
                },1000)
            })
        }

        //列表
        function getPlaces() {
            request('http://afantizz.com/likingfit/place-list',{},function (resp) {
                placeByTypes = resp
                var typeUl = $('.place-bg ul:first-child')
                for (var i=0; i<placeByTypes.length; i++) {
                    var placebyType = placeByTypes[i]
                    var li = $("<li><a href='javascript:changePlaceWithType("+placebyType.type_id+")' class='type'>"+
                            placebyType.type_name+"<span class='glyphicon glyphicon-menu-right'>" +
                            "</span></a></li>")
                    typeUl.append(li)
                }
                changePlaceWithType(placeByTypes[0].type_id)
            })
        }
        var placeByTypes = new Array()
        function changePlaceWithType(typeId) {
            var placeUl = $('.place-bg ul:last-child')
            placeUl.children('li').remove()
            for (var i=0; i<placeByTypes.length; i++) {
                var placeByType = placeByTypes[i]
                if (placeByType.type_id == typeId) {
                    var places = placeByType.place
                    for (var j=0; j<places.length; j++) {
                        var place = places[j]
                        var li = $("<li class='l-name clearfix'>" +
                        "<div class='pull-left'>" +
                        "<p>"+place.name+"</p>" +
                        "<p>"+place.lng+","+place.lat+"</p>" +
                        "<p>"+(place.is_show ? '在地图上显示' : '不在地图上显示') +"</p></div>"+
                        "<div class='pull-right'><a href='javascript:deletePlace("+place.id+")'>删除</a></div></li>")
                        placeUl.append(li)
                    }
                }
            }
        }
        function deletePlace(placeId) {
            var p = {
                id: placeId
            }
            request('http://afantizz.com/likingfit/place-delete',p,function (resp) {
                location.reload()
            })

        }
        function showAddPlace() {
            $('.add-bg').css('display','block')
            $('.place-bg').css('display','none')
        }
        function showPlaceList() {
            $('.add-bg').css('display','none')
            $('.place-bg').css('display','block')
        }
    </script>
</head>
<body>
<div class="container">
    <div class="top">
        <div class="action">
            <a class="add" href="javascript:showAddPlace()">添加地址</a>
            <a class="list" href="javascript:showPlaceList()">查看列表</a>
            <a class="tool" href="http://lbs.amap.com/console/show/picker" target="_blank">地图拾点工具</a>
        </div>
    </div>
    <div class="content">
        <div class="add-bg">
            <div>
                名称: <input class="name" type="text" placeholder="填写在列表中显示的名称"> 建议简写
            </div>
            <div>
                经度: <input class="lng" type="text" placeholder="填写经度"> 例: 121.363306
            </div>
            <div>
                纬度: <input class="lat" type="text" placeholder="填写纬度"> 例: 37.514801
            </div>
            <div>
                分类: <select name="" id="type">
                    <option value="0">其他</option>
                    <option value="1">院系</option>
                    <option value="2">食堂</option>
                    <option value="3">宿舍</option>
                </select>
            </div>
            <div class="show-bg">
                在地图上显示: <input name="showInmap" type="radio" value="1" checked="checked" /> 是
                &nbsp;&nbsp;<input name="showInmap" type="radio" value="0" /> 否
            </div>
            <div class="submit-bg">
                <a href="javascript:insertAddress()">添加</a>
            </div>
        </div>
        <div class="place-bg">
            <ul class="pull-left">
            </ul>
            <ul class="pull-left">
            </ul>
        </div>
    </div>
</div>

</body>
</html>